{% extends 'base/base.html' %}
{% load static %}

{% block title %}抽盒结果 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .result-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 0;
    }
    
    .result-header {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .result-title {
        font-size: 2.5rem;
        color: #0d6efd;
        margin-bottom: 10px;
        font-weight: 700;
    }
    
    .result-subtitle {
        font-size: 1.2rem;
        color: #6c757d;
    }
    
    .result-card {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: none;
        animation: pop-in 0.6s ease-out forwards;
    }
    
    @keyframes pop-in {
        0% { transform: scale(0.5); opacity: 0; }
        80% { transform: scale(1.05); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }
    
    .product-image {
        width: 100%;
        height: 300px;
        object-fit: contain;
        background-color: #f8f9fa;
        padding: 20px;
    }
    
    .confetti {
        position: fixed;
        width: 10px;
        height: 10px;
        background-color: #f00;
        opacity: 0;
        top: 0;
        left: 50%;
        animation: confetti-fall 3s ease-in-out forwards;
    }
    
    @keyframes confetti-fall {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    
    .info-list {
        list-style: none;
        padding: 0;
    }
    
    .info-list li {
        padding: 10px 0;
        border-bottom: 1px dashed #e9ecef;
    }
    
    .info-list li:last-child {
        border-bottom: none;
    }
    
    .info-list .info-label {
        color: #6c757d;
        font-weight: 500;
    }
    
    .original-price {
        text-decoration: line-through;
        color: #6c757d;
    }
    
    .action-buttons {
        margin-top: 30px;
    }
    
    .action-buttons .btn {
        padding: 10px 25px;
        border-radius: 30px;
        font-weight: 600;
        margin: 0 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="result-container">
    <div class="result-header">
        <h1 class="result-title">恭喜！抽取成功</h1>
        <p class="result-subtitle">您从「{{ box.name }}」中抽到了以下商品</p>
    </div>
    
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card result-card mb-4">
                <div class="card-body p-0">
                    <div class="row g-0">
                        <div class="col-md-6">
                            <img src="{{ product.image_url|default:'/static/images/no-image.png' }}" alt="{{ product.name }}" class="product-image">
                        </div>
                        <div class="col-md-6 p-4">
                            <h2 class="mb-2">{{ product.name }}</h2>
                            <p class="text-muted mb-3">{{ product.category }}</p>
                            
                            <ul class="info-list mb-4">
                                <li>
                                    <span class="info-label">品牌:</span>
                                    <span class="info-value">{{ product.brand|default:"未知" }}</span>
                                </li>
                                <li>
                                    <span class="info-label">规格:</span>
                                    <span class="info-value">{{ product.weight|default:"未知" }}</span>
                                </li>
                                <li>
                                    <span class="info-label">原价:</span>
                                    <span class="info-value">¥{{ product.original_price }}</span>
                                </li>
                                <li>
                                    <span class="info-label">盲盒价:</span>
                                    <span class="info-value text-danger fw-bold">¥{{ box.price }}</span>
                                </li>
                                <li>
                                    <span class="info-label">节省:</span>
                                    <span class="info-value text-success fw-bold">
                                        {% with savings=product.original_price|floatformat:2|slugify|slice:":-3"|add:"."|add:product.original_price|floatformat:2|slugify|slice:"-2:" %}
                                        ¥{{ savings|default:"-" }}
                                        {% endwith %}
                                    </span>
                                </li>
                            </ul>
                            
                            <div class="alert alert-success">
                                <i class="fas fa-leaf me-2"></i> 您的购买为爱心事业做出了贡献！我们会把你的爱心传递给需要帮助的人！
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center action-buttons">
                <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-outline-primary">
                    <i class="fas fa-redo me-2"></i>再抽一个
                </a>
                <a href="{% url 'shopping:cart' %}" class="btn btn-primary">
                    <i class="fas fa-shopping-cart me-2"></i>查看购物车
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 五彩纸屑效果 -->
<div id="confetti-container"></div>
{% endblock %}

{% block extra_js %}
<script>
    // 创建五彩纸屑
    function createConfetti() {
        const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590'];
        const confettiCount = 150;
        const container = document.getElementById('confetti-container');
        
        for (let i = 0; i < confettiCount; i++) {
            const confetti = document.createElement('div');
            confetti.classList.add('confetti');
            
            // 随机颜色
            const color = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.backgroundColor = color;
            
            // 随机尺寸
            const size = Math.random() * 10 + 5;
            confetti.style.width = `${size}px`;
            confetti.style.height = `${size}px`;
            
            // 随机形状
            if (Math.random() > 0.5) {
                confetti.style.borderRadius = '50%';
            }
            
            // 随机位置
            const left = Math.random() * 100;
            confetti.style.left = `${left}%`;
            
            // 随机动画持续时间
            const duration = Math.random() * 3 + 2;
            confetti.style.animationDuration = `${duration}s`;
            
            // 随机延迟
            const delay = Math.random() * 1.5;
            confetti.style.animationDelay = `${delay}s`;
            
            container.appendChild(confetti);
            
            // 动画结束后移除
            setTimeout(() => {
                confetti.remove();
            }, (duration + delay) * 1000);
        }
    }
    
    // 页面加载完成后触发纸屑效果
    document.addEventListener('DOMContentLoaded', function() {
        createConfetti();
        
        // 播放成功音效
        const audio = new Audio('/static/sounds/success.mp3');
        audio.volume = 0.5;
        audio.play().catch(e => console.log('自动播放被阻止'));
    });
</script>
{% endblock %} 